<script setup lang="ts">
import {
  EDIT_TABS_ENUM,
  GEN_TYPE_COLUMN,
  GEN_TYPE_ENUM,
  HTML_TYPE_COLUMN,
  JAVE_TYPE_COLUMN,
  QUERY_TYPE_COLUMN,
  TPL_CATEGORY_COLUMN,
  TPL_CATEGORY_ENUM
} from "@/views/tool/gen/const";
import { onBeforeRouteLeave } from "vue-router";
import { RouterRecord } from "@/global/record/RouterRecord";
import { getGenTableApi, updateGenTableApi } from "@/api/tool/gen";
import { listMenuApi } from "@/api/system/menu";
import { listOptionselectApi } from "@/api/system/dict";

const { proxy } = getCurrentInstance();

const route = useRoute();

const genInfoFormRef = ref();

// 激活tabs
const activeName: EDIT_TABS_ENUM = EDIT_TABS_ENUM.columnInfo;

// 代码生成详细信息
const genInfoForm = ref<GenTableRecord>({});

// 表格字段
const tableColumns = ref<GenColumnRecord[]>([]);

// 表格列表
const genTables = ref<GenTableRecord[]>([]);

// 菜单列表
const menuList = ref<MenuRecord[]>([]);

// 关联子表字段列表
const subColumns = ref<GenColumnRecord[]>([]);

const dictList = ref<DictRecord[]>([]);

// 表单校验
const rules = ref({
  tableName: [{ required: true, message: "请输入表名称", trigger: "blur" }],
  tableComment: [{ required: true, message: "请输入表描述", trigger: "blur" }],
  className: [{ required: true, message: "请输入实体类名称", trigger: "blur" }],
  functionAuthor: [{ required: true, message: "请输入作者", trigger: "blur" }],
  tplCategory: [{ required: true, message: "请选择生成模板", trigger: "blur" }],
  packageName: [{ required: true, message: "请输入生成包路径", trigger: "blur" }],
  moduleName: [{ required: true, message: "请输入生成模块名", trigger: "blur" }],
  businessName: [{ required: true, message: "请输入生成业务名", trigger: "blur" }],
  functionName: [{ required: true, message: "请输入生成功能名", trigger: "blur" }]
})

/** 获取表代码生产信息 */
function getGenTable() {
  const tableId: number = route.params && Number(route.params.tableId);
  getGenTableApi(tableId).then(response => {
    genInfoForm.value = response.data.info;
    tableColumns.value = response.data.rows;
    genTables.value = response.data.tables;
    if (genInfoForm.value.subTableName) {
      setSubTableColumns(genInfoForm.value.subTableName);
    }
  })
}

/** 获取菜单列表 */
function getMenuList() {
  listMenuApi().then(response => {
    response.data.map(item => {
      item.menuId = String(item.menuId);
    })
    menuList.value = handleTree(response.data, "menuId");
  });
}

/** 关联子表的表名变更 */
function subSelectChange(value: string) {
  genInfoForm.value.subTableFkName = "";
  setSubTableColumns(value);
}

/** 设置关联子表的字段列表 */
function setSubTableColumns(value: string) {
  subColumns.value = genTables.value.find(item => item.tableName == value)?.columns || [];
}

/** 生成模板变更 */
function tplSelectChange(value: string) {
  if (value !== TPL_CATEGORY_ENUM.sub) {
    genInfoForm.value.subTableName = "";
    genInfoForm.value.subTableFkName = "";
  }
}

/** 查询字典下拉列表 */
function getgetDictList() {
  listOptionselectApi().then(response => {
    dictList.value = response.data;
  });
}

/** 提交 */
function submitForm() {
  let genInfoCopy = cloneDeep(genInfoForm.value);
  genInfoCopy.columns = tableColumns.value;

  genInfoCopy.params = {
    treeCode: genInfoCopy.treeCode,
    treeName: genInfoCopy.treeName,
    treeParentCode: genInfoCopy.treeParentCode,
    parentMenuId: genInfoCopy.parentMenuId
  }
  genInfoFormRef.value.validate(valid => {
    if (valid) {
      updateGenTableApi(genInfoCopy).then(response => {
        proxy.$modal.msgSuccess(response.msg);
        handleExit();
      })
    } else {
      proxy.$modal.msgError("表单校验未通过，请重新检查提交内容");
    }
  })
}

/** 返回 */
function handleExit() {
  router.go(-1);
}

onBeforeRouteLeave(() => {
  useTagsViewStore().delView(<RouterRecord>route);
})

getGenTable();
getMenuList();
getgetDictList();

</script>

<template>
  <div class="app-container">
    <div class="back-item">
      <div class="table-top mb8">
        <div class="title title-left">
        </div>
        <el-button
            class="top-right-btn"
            icon="Calendar"
            type="primary"
            plain
            v-debounce="submitForm"
        >提交
        </el-button>
        <el-button
            class="top-right-btn"
            icon="Back"
            type="warning"
            plain
            @click="handleExit"
        >返回
        </el-button>
      </div>
      <el-form :inline="true" ref="genInfoFormRef" :model="genInfoForm" :rules="rules" label-width="140px">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" :name="EDIT_TABS_ENUM.basicInfo">
            <el-form-item label="表名称" prop="tableName">
              <el-input placeholder="请输入仓库名称" v-model="genInfoForm.tableName" />
            </el-form-item>
            <el-form-item label="表描述" prop="tableComment">
              <el-input placeholder="请输入" v-model="genInfoForm.tableComment" />
            </el-form-item>
            <el-form-item label="实体类名称" prop="className">
              <el-input placeholder="请输入" v-model="genInfoForm.className" />
            </el-form-item>
            <el-form-item label="作者" prop="functionAuthor">
              <el-input placeholder="请输入" v-model="genInfoForm.functionAuthor" />
            </el-form-item>
            <el-form-item label="备注" prop="remark" class="item-describe">
              <el-input type="textarea" :rows="3" v-model="genInfoForm.remark" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="字段信息" :name="EDIT_TABS_ENUM.columnInfo">
            <el-table ref="dragTable" :data="tableColumns" row-key="columnId" v-tablesticky>
              <el-table-column label="序号" type="index" width="55px" />
              <el-table-column label="字段列名" prop="columnName" min-width="120" show-overflow-tooltip />
              <el-table-column label="字段描述" prop="columnComment" min-width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.columnComment" placeholder="请输入字段描述" />
                </template>
              </el-table-column>
              <el-table-column label="物理类型" prop="columnType" min-width="120" show-overflow-tooltip />
              <el-table-column label="Java类型" prop="javaType" min-width="120">
                <template #default="scope">
                  <el-select v-model="scope.row.javaType" placeholder="请选择Java类型">
                    <el-option
                        v-for="(item, index) in JAVE_TYPE_COLUMN"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="java属性" prop="javaField" min-width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.javaField" placeholder="请输入java属性" />
                </template>
              </el-table-column>
              <el-table-column label="插入" prop="isInsert">
                <template #default="scope">
                  <el-checkbox true-value="1" false-value="0" v-model="scope.row.isInsert" />
                </template>
              </el-table-column>
              <el-table-column label="编辑" prop="isEdit">
                <template #default="scope">
                  <el-checkbox true-value="1" false-value="0" v-model="scope.row.isEdit" />
                </template>
              </el-table-column>
              <el-table-column label="列表" prop="isList">
                <template #default="scope">
                  <el-checkbox true-value="1" false-value="0" v-model="scope.row.isList" />
                </template>
              </el-table-column>
              <el-table-column label="查询" prop="isQuery">
                <template #default="scope">
                  <el-checkbox true-value="1" false-value="0" v-model="scope.row.isQuery" />
                </template>
              </el-table-column>
              <el-table-column label="查询方式" prop="queryType" min-width="120">
                <template #default="scope">
                  <el-select v-model="scope.row.queryType" placeholder="请选择查询方式">
                    <el-option
                        v-for="(item, index) in QUERY_TYPE_COLUMN"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="必填" prop="isRequired">
                <template #default="scope">
                  <el-checkbox true-value="1" false-value="0" v-model="scope.row.isRequired"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="显示类型" prop="htmlType" min-width="120">
                <template #default="scope">
                  <el-select v-model="scope.row.htmlType" placeholder="请选择显示类型">
                    <el-option
                        v-for="(item, index) in HTML_TYPE_COLUMN"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="字典类型" prop="dictType" min-width="120">
                <template #default="scope">
                  <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择字典类型">
                    <el-option
                        v-for="dict in dictList"
                        :key="dict.dictType"
                        :label="dict.dictName"
                        :value="dict.dictType"
                    >
                      <span class="fl">{{ dict.dictName }}</span>
                      <span class="fr" style="color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="生成信息" :name="EDIT_TABS_ENUM.genInfoForm">
            <el-form-item label="生成模板" prop="tplCategory">
              <el-select v-model="genInfoForm.tplCategory" placeholder="请选择系统内置" @change="tplSelectChange">
                <el-option
                    v-for="(item, index) in TPL_CATEGORY_COLUMN"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="packageName">
              <template #label>
                <span>
                  <el-tooltip content="生成在哪个java包下，例如 com.bige.system" placement="top">
                    <icon-svg icon-name="QuestionFilled" />
                  </el-tooltip>
                  生成包路径
                </span>
              </template>
              <el-input v-model="genInfoForm.packageName" />
            </el-form-item>
            <el-form-item prop="moduleName">
              <template #label>
                <span>
                  <el-tooltip content="可理解为子系统名，例如 system" placement="top">
                    <icon-svg icon-name="QuestionFilled" />
                  </el-tooltip>
                  生成模块名
                </span>
              </template>
              <el-input v-model="genInfoForm.moduleName" />
            </el-form-item>
            <el-form-item prop="businessName">
              <template #label>
                <span>
                  <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
                    <icon-svg icon-name="QuestionFilled" />
                  </el-tooltip>
                  生成业务名
                </span>
              </template>
              <el-input v-model="genInfoForm.businessName" />
            </el-form-item>
            <el-form-item prop="functionName">
              <template #label>
                <span>
                  <el-tooltip content="用作类描述，例如 用户" placement="top">
                    <icon-svg icon-name="QuestionFilled" />
                  </el-tooltip>
                  生成功能名
                </span>
              </template>
              <el-input v-model="genInfoForm.functionName" />
            </el-form-item>
            <el-form-item>
              <template #label>
                上级菜单
                <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
                  <icon-svg icon-name="QuestionFilled" />
                </el-tooltip>
              </template>
              <el-tree-select
                  v-model="genInfoForm.parentMenuId"
                  :data="menuList"
                  :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
                  value-key="menuId"
                  placeholder="选择上级菜单"
                  check-strictly
              />
            </el-form-item>
            <el-form-item prop="genType">
              <template #label>
                <span>
                  <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
                    <icon-svg icon-name="QuestionFilled" />
                  </el-tooltip>
                  生成代码方式
                </span>
              </template>
              <el-radio-group v-model="genInfoForm.genType" placeholder="请选择生成代码方式">
                <el-radio
                    :value="item.value"
                    v-for="(item, index) in GEN_TYPE_COLUMN"
                    :key="index"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <template v-if="genInfoForm.genType == GEN_TYPE_ENUM.custom">
              <el-form-item prop="genPath" class="item-describe">
                <template #label>
                  <span>
                    <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
                      <icon-svg icon-name="QuestionFilled" />
                    </el-tooltip>
                    自定义路径
                  </span>
                </template>
                <el-input v-model="genInfoForm.genPath">
                  <template #append>
                    <el-dropdown>
                      <el-button type="primary">
                        最近路径快速选择
                        <icon-svg icon-name="ArrowDown" class="el-icon--right" />
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click="genInfoForm.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </template>
                </el-input>
              </el-form-item>
            </template>
            <template v-if="genInfoForm.tplCategory == TPL_CATEGORY_ENUM.tree">
              <h4 class="form-header">其他信息</h4>
              <el-form-item label="菜单状态" prop="status">
                <template #label>
                  <span>
                    <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
                      <icon-svg icon-name="QuestionFilled" />
                    </el-tooltip>
                    树编码字段
                  </span>
                </template>
                <el-select v-model="genInfoForm.treeCode" placeholder="请选择树编码字段">
                  <el-option
                      v-for="(column, index) in genInfoForm.columns"
                      :key="index"
                      :label="column.columnName + '：' + column.columnComment"
                      :value="column.columnName"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <template #label>
                  <span>
                    <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
                      <icon-svg icon-name="QuestionFilled" />
                    </el-tooltip>
                    树父编码字段
                  </span>
                </template>
                <el-select v-model="genInfoForm.treeParentCode" placeholder="请选择">
                  <el-option
                      v-for="(column, index) in genInfoForm.columns"
                      :key="index"
                      :label="column.columnName + '：' + column.columnComment"
                      :value="column.columnName"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <template #label>
                  <span>
                    <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
                      <icon-svg icon-name="QuestionFilled" />
                    </el-tooltip>
                    树名称字段
                  </span>
                </template>
                <el-select v-model="genInfoForm.treeName" placeholder="请选择">
                  <el-option
                      v-for="(column, index) in genInfoForm.columns"
                      :key="index"
                      :label="column.columnName + '：' + column.columnComment"
                      :value="column.columnName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-if="genInfoForm.tplCategory == TPL_CATEGORY_ENUM.sub">
              <h4 class="form-header">关联信息</h4>
              <el-form-item>
                <template #label>
                  <span>
                    <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
                      <icon-svg icon-name="QuestionFilled" />
                    </el-tooltip>
                    关联子表的表名
                  </span>
                </template>
                <el-select v-model="genInfoForm.subTableName" placeholder="请选择关联子表的表名"
                           @change="subSelectChange">
                  <el-option
                      v-for="(table, index) in genTables"
                      :key="index"
                      :label="table.tableName + '：' + table.tableComment"
                      :value="table.tableName"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <template #label>
                  <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
                    <icon-svg icon-name="QuestionFilled" />
                  </el-tooltip>
                  子表关联的外键名
                </template>
                <el-select v-model="genInfoForm.subTableFkName" placeholder="请选择">
                  <el-option
                      v-for="(column, index) in subColumns"
                      :key="index"
                      :label="column.columnName + '：' + column.columnComment"
                      :value="column.columnName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div class="line-magin" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.el-form--inline {
  :deep(.el-form-item__content) {
    width: 260px;
  }

  .item-describe {
    width: 792px;
  }
}

.top-right-btn {
  z-index: 99;
}

:deep(.el-tabs) {
  margin-top: -40px !important;
}
</style>